<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10.17</title>

    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .box > ul {
        width: 700px;
        height: 50px;
        display: flex;
        margin: 0 auto;
      }
      .box > ul > li:hover {
        color: orange;
        cursor: pointer;
      }
      li {
        width: 100px;
        height: 100%;
        text-align: center;
        line-height: 50px;
      }
      .box20 {
        display: none;
      }
      .box21 {
        display: none;
      }
      .box22 {
        display: none;
      }
      .box23 {
        display: none;
      }
      .box24 {
        display: none;
      }
      .box25 {
        display: none;
      }
      .box26 {
        display: none;
      }
      .box27 {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li class="li">Xiaomi手机</li>
        <li class="li">Redmi手机</li>
        <li class="li">电视</li>
        <li class="li">笔记本</li>
        <li class="li">平板</li>
        <li class="li">家电</li>
        <li class="li">路由器</li>
      </ul>
    </div>
    <div class="box2">
      <img src="./XiaoMi手机.png" class="box20" />
      <img src="./Redmi手机.png" class="box21" />
      <img src="./电视.png" class="box22" />
      <img src="./笔记本.png" class="box23" />
      <img src="./平板.png" class="box24" />
      <img src="./家电.png" class="box25" />
      <img src="./路由器.png" class="box26" />
    </div>

    <script>
      let divs = document.querySelector(".box");
      let uls = document.querySelectorAll("ul");
      let lis = document.querySelectorAll("li");
      let img1 = document.querySelector(".box20");
      let img2 = document.querySelector(".box21");
      let img3 = document.querySelector(".box22");
      let img4 = document.querySelector(".box23");
      let img5 = document.querySelector(".box24");
      let img6 = document.querySelector(".box25");
      let img7 = document.querySelector(".box26");
      let img8 = document.querySelector(".box27");
      let box2 = document.querySelector("div.box2");
      // console.log(box2);
      // console.log(img);
      lis[0].addEventListener("mouseover", function () {
        img1.style.display = "block";
        // console.log(123);
      });
      lis[0].addEventListener("mouseout", function () {
        img1.style.display = "none";
      });

      lis[1].addEventListener("mouseover", function () {
        img2.style.display = "block";
      });
      lis[1].addEventListener("mouseout", function () {
        img2.style.display = "none";
      });

      lis[2].addEventListener("mouseover", function () {
        img3.style.display = "block";
      });
      lis[2].addEventListener("mouseout", function () {
        img3.style.display = "none";
      });

      lis[3].addEventListener("mouseover", function () {
        img4.style.display = "block";
      });
      lis[3].addEventListener("mouseout", function () {
        img4.style.display = "none";
      });

      lis[4].addEventListener("mouseover", function () {
        img5.style.display = "block";
      });
      lis[4].addEventListener("mouseout", function () {
        img5.style.display = "none";
      });

      lis[5].addEventListener("mouseover", function () {
        img6.style.display = "block";
      });
      lis[5].addEventListener("mouseout", function () {
        img6.style.display = "none";
      });

      lis[6].addEventListener("mouseover", function () {
        img7.style.display = "block";
      });
      lis[6].addEventListener("mouseout", function () {
        img7.style.display = "none";
      });

      lis[7].addEventListener("mouseover", function () {
        img8.style.display = "block";
      });
      lis[7].addEventListener("mouseout", function () {
        img8.style.display = "none";
      });
    </script>
  </body>
</html>
